<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{$user}/{$project} - Gitdoc</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" rel="stylesheet"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.2/markdown-it.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs.min.css" rel="stylesheet"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
	<script>
		var M={
			user:"{$user|noescape}",
			project:"{$project|noescape}",
			branch:"{$branch|noescape}",
			home:"{$home|noescape}",
		};
		function htmlspecialchars(str){
			str = str.replace(/&/g, '&amp;');
			str = str.replace(/</g, '&lt;');
			str = str.replace(/>/g, '&gt;');
			str = str.replace(/"/g, '&quot;');
			str = str.replace(/'/g, '&#039;');
			return str;
		}
		function changeBranch(){
			M.branch=event.target.value;
			loadTree();
		}
		function loadTag(){
			$.ajax({
				url: '{$root|noescape}/tags',
				type: 'GET',
				dataType: 'json',
				data: {
					user: M.user,
					project: M.project
				},
			})
			.done(function(res) {
				var ops = '';
				for (var i = res.length - 1; i >= 0; i--) {
					ops += '<option value="'+res[i].object.sha+'">'+res[i].ref+'</option>';
				}
				$('#branch').html(ops);
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
		}
		function loadTree(){
			$('#nav').html('loading...');
			$.ajax({
				url: '{$root|noescape}/tree',
				type: 'GET',
				dataType: 'json',
				data: {
					user: M.user,
					project: M.project,
					branch: M.branch
				},
			})
			.done(function(res) {
				$('#nav').on('changed.jstree', function (e, data) {
					if (data.node.li_attr.type=='blob') {
						$('#content').html('loading...');
						$.ajax({
							url: '{$root|noescape}/blob',
							type: 'GET',
							data: {
								user: M.user,
								project: M.project,
								branch: M.branch,
								sha: data.node.li_attr.sha,
							},
						})
						.done(function(res) {
							if (data.node.li_attr.type=='blob') {
								fileName = data.node.li_attr.path.lastIndexOf(".");
								fileNameLength = data.node.li_attr.path.length;
								fileFormat = data.node.li_attr.path.substring(fileName + 1, fileNameLength);
								if (fileFormat == 'md') {
									$('#content').html(markdownit().render(res));
								}else{
									$('#content').html('<pre><code class="'+fileFormat+'">'+htmlspecialchars(res)+'</code></pre>');
								}
								$('pre code').each(function(i, block) {
					                hljs.highlightBlock(block);
					            });
							}
						})
						.fail(function() {
							$('#content').html('loading error');
						});
					}
				}).jstree({
					core:{
						data:res
					}
				});
				$('#nav').on("ready.jstree", function (e, data) {
					$.each($('#nav > ul > li > a'), function(index, val) {
						if ($(this).text() == M.home) {
							$(this).trigger('click');
						}
					});
				});
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});
		}
		
		$(function() {
			loadTag();
			loadTree();
		});
	</script>
</head>
<body>
	<style>
		html, body{
			margin: 0;
			padding: 0;
		}
		.left{
			position: fixed;
			left: 0;
			width: 280px;
			overflow: auto;
			height: calc(100% - 20px);
			padding: 10px;
			border-right: 1px solid #ddd;
		}
		#content{
			overflow: auto;
			margin-left: 300px;
			height: calc(100% - 40px);
			padding: 20px;
		}
	</style>
	<div class="left">
		<div style="font-size: 1.2em;font-weight: bold;padding: 0 0 10px 0;">{$user}/{$project}</div>
		<div><select id="branch" onchange="changeBranch()"></select></div>
		<div id="nav"></div>
	</div>
	<div id="content"></div>
</body>
</html>